<template>
  <div class="wantBuy-step">
    <u-form
      :model="form"
      ref="uForm"
      :label-style="{ color: '#545454', fontWeight: 400 }"
      label-width="180"
    >
      <u-gap height="15" bg-color="#f7f4f8"></u-gap>
      <view class="title">{{$t('locales.purchaseMain')}}</view>

      <u-form-item :label="$t('locales.enterpriseName')" prop="enterpriseName" required>
        <u-input :disabled="whetherEdit" v-model="form.enterpriseName" :placeholder="$t('locales.blur') + $t('locales.enterpriseName')" />
      </u-form-item>

      <u-form-item :label="$t('locales.contacts')" prop="enterpriseContacts" required>
        <u-input :disabled="whetherEdit" v-model="form.enterpriseContacts" :placeholder="$t('locales.blur') + $t('locales.contacts')" />
      </u-form-item>

      <u-form-item :label="$t('locales.contactInfo')" prop="enterprisePhone" type="number" required>
        <u-input :disabled="whetherEdit" v-model="form.enterprisePhone" :placeholder="$t('locales.blur') + $t('locales.contactInfo')" />
      </u-form-item>

      <!-- 国家 -->
      <u-form-item :label="$t('locales.hostCountry')" prop="country">
        <u-input
          :border="false"
          type="select"
          :select-open="countryInputType === 1 ? true : false"
          v-model="form.country"
          :placeholder="$t('locales.switchCountry')"
          @click="getCountryList(1, 0)"
        ></u-input>
      </u-form-item>

      <!-- 省 -->
      <u-form-item :label="$t('locales.provinceState')" prop="prov">
        <u-input
          :border="false"
          type="select"
          :select-open="countryInputType === 2 ? true : false"
          v-model="form.prov"
          :placeholder="$t('locales.provinceState')"
          @click="getCountryList(2, form.countryId)"
        ></u-input>
      </u-form-item>

      <!-- 市 -->
      <u-form-item :label="$t('locales.city')" prop="city">
        <u-input
          :border="false"
          type="select"
          :select-open="countryInputType === 3 ? true : false"
          v-model="form.city"
          :placeholder="$t('locales.city')"
          @click="getCountryList(3, form.provId)"
        ></u-input>
      </u-form-item>

      <u-form-item :label="$t('locales.detailedAddress')" prop="enterpriseAddress">
        <u-input
          type="textarea"
          v-model="form.enterpriseAddress"
          :placeholder="$t('locales.blur') + $t('locales.detailedAddress')"
          :maxlength="200"
          :custom-style="{
            background: '#FAFAFA',
            padding: '10rpx'
          }"
        />
      </u-form-item>
    </u-form>

    <u-picker
      v-model="showCountry"
      mode="selector"
      :range="countryList"
      range-key="name"
      @confirm="pickerConfirm"
    ></u-picker>

    <u-button
      ripple
      shape="circle"
      :custom-style="{
        backgroundColor: '#0049AC',
        color: '#fff',
        margin: '56rpx 30rpx 30rpx 30rpx',
        height: '88rpx',
        width: 'calc(100% - 60rpx)'
      }"
      @click="submit"
    >
      {{ $t('locales.publish') }}
    </u-button>
    <u-button
      ripple
      shape="circle"
      :custom-style="{
        backgroundColor: '#F6F6F7',
        color: '#A8A8A8',
        margin: '0 30rpx',
        height: '88rpx',
        width: 'calc(100% - 60rpx)'
      }"
      @click="previous"
    >
      {{ $t('locales.upStep') }}
    </u-button>
  </div>
</template>
<script>
import SubmitBtn from '@/components/submitBtn'
import { countryCurrency } from '@/api/http/user'
export default {
  components: {
    SubmitBtn
  },
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const required = {
      required: true,
      message: this.$t('locales.notNull'),
      trigger: ['blur']
    }

    return {
      form: {
        enterpriseName: '',
        enterpriseContacts: '',
        enterprisePhone: '',
        country: '',
        countryId: '',
        prov: '',
        provId: '',
        city: '',
        cityId: '',
        enterpriseAddress: '',
        enterpriseId: ''
      },
      rules: {
        enterpriseName: [required],
        enterpriseContacts: [required],
        enterprisePhone: [required]
      },

      showCountry: false,
      countryList: [],
      countryInputType: 0
    }
  },

  created() {
  },

  computed: {
    whetherEdit() {
      return this.form.enterpriseId === '' ? false : true
    }
  },

  watch: {
    showCountry(val) {
      if (!val) {
        this.countryInputType = 0
        this.countryList = []
      }
    },
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        Object.keys(this.form).forEach((key) => {
          this.form[key] = val[key]
        })
        this.$nextTick(() => {
          this.$refs.uForm.setRules(this.rules)
        })
      }
    }
  },

  methods: {
    previous() {
      this.$emit('previous', this.form)
    },

    // 获取省市区数据
    async getCountryList(level, parentId) {
      if (level === 2 && !parentId) {
        return uni.showToast({
          icon: 'none',
          title: this.$t('locales.switchCountry')
        })
      }
      if (level === 3 && !parentId) {
        return uni.showToast({
          icon: 'none',
          title: this.$t('locales.provinceState')
        })
      }
      this.countryInputType = level
      const res = await countryCurrency({
        level,
        parentId
      })
      if (res.code === 200) {
        this.showCountry = true
        this.countryList = res.data
      }
    },

    pickerConfirm(row) {
      const data = this.countryList[row[0]]
      if (this.countryInputType === 1) {
        this.form.country = data.name
        this.form.countryId = data.countryAndAreaId

        // 清空 省 市
        this.form.prov = ''
        this.form.provId = ''

        this.form.city = ''
        this.form.cityId = ''
      }
      if (this.countryInputType === 2) {
        this.form.prov = data.name
        this.form.provId = data.countryAndAreaId

        // 清空 市
        this.form.city = ''
        this.form.cityId = ''
      }
      if (this.countryInputType === 3) {
        this.form.city = data.name
        this.form.cityId = data.countryAndAreaId
      }
    },

    submit() {
      this.$refs.uForm.validate((valid) => {
        if (!valid) return
        this.$emit('change', this.form)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wantBuy-step {
  .u-form {
    background-color: #fff;

    .u-form-item {
      padding-left: 30rpx;
      padding-right: 30rpx;
    }
  }
  .title {
    line-height: 90rpx;
    padding: 0 30rpx;
    background-color: #fff;
    border-bottom: 1px solid #e3e6ed;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #212121;
  }
  .addBtn {
    margin: 10rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
